import {Menu} from 'antd';
import {Component, Fragment} from 'react';
// import {createFromIconfontCN} from '@ant-design/icons';
//路由导入
import router from '../../router'
import {withRouter} from 'react-router-dom';

const {SubMenu} = Menu;
/*const IconFont = createFromIconfontCN({
    scriptUrl: [
        '//at.alicdn.com/t/font_1788044_0dwu4guekcwr.js',
        '//at.alicdn.com/t/font_1788592_a5xf2bdic3u.js',
    ]
});*/

class AsideMenu extends Component {
    constructor(props) {
        super(props);
        this.state = {
            openKeys:'/index',
            selectedKeys:'/index'
        }
    }
    //处理一级菜单
    renderMenu = ({key,title})=>{
        return <Menu.Item onClick={this.handleMenuClick} key={key}>{title}</Menu.Item>
    }

    //处理菜单点击事件
    handleMenuClick = (event)=>{

        this.setState({
            ...this.state,
            selectedKeys:event.key
        },()=>{
            this.props.history.push(event.key)
        })
    }
    //处理父级菜单点击事件
    handleSubMenuClick = (event)=>{
        this.setState({
            ...this.state,
            openKeys:event.key === this.state.openKeys ? '' : event.key
        })
    }
    //处理多级菜单
    renderSubMenu = ({key,title,child})=>{
        return (
            <SubMenu key={key} onTitleClick={this.handleSubMenuClick}  title={title}>
                {
                    child && child.map(item=> item.child && item.child.length > 0 ? this.renderSubMenu(item) : this.renderMenu(item))
                }
            </SubMenu>
        )
    }
    componentDidMount() {
        const Path = this.props.history.location.pathname;
        const PathArr = Path.split('/');
        let openKeys = `/${PathArr[1]}/${PathArr[2]}`;
        this.setState({
            ...this.state,
            selectedKeys:this.props.history.location.pathname,
            openKeys
        })
    }

    render() {
        return (
            <Fragment>
                <Menu
                    theme="dark"
                    mode="inline"
                    openKeys={[this.state.openKeys]}
                    selectedKeys={[this.state.selectedKeys]}
                    style={{height: '100%', borderRight: 0}}
                >
                    {
                        router && router.map((res)=> res.child ? this.renderSubMenu(res) : this.renderMenu(res) )
                    }
                </Menu>
            </Fragment>
        )
    }
}

export default withRouter(AsideMenu)
